.message {
  min-width: 30%;
  gap: 10rpx;
  font-size: 28rpx;
}

.title-text {
  @include ellipsis(2);
}

.left-direction {
  left: 5%;
}

.right-direction {
  right: 5%;
}

.type-success {
  background-color: #4caf50;
}

.type-error {
  background-color: #ff5252;
}

.type-warning {
  background-color: #fb8c00;
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100vw, 0, 0);
    transform: translate3d(100vw, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100vw, 0, 0);
    transform: translate3d(-100vw, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}